<template>
	<view class="">
		<view class="box flex flex-wrap relative" :style="{ height: (windowHeight-44)/2 + 'px' }">
			<image src="../../static/image/yidanyuan.png" mode="" class="positon_img"></image>
			<view class="box_lists" v-for="(i,v) in 4" :key="v">
				<view class="" v-if="small_sort==v+1&&big_sort==1">
					<view class="box_list_head flex items-center" v-if="(v)%2 ==0">
						<view class="box_title marginRight-30">
							门牌号{{big_sort}}-{{small_sort}}
						</view>
						<view class="box_pro">
							{{name}}
						</view>
					</view>
					<view class="box_list_head flex items-center flex-end" v-if="(v) % 2 ==1">
						<view class="box_pro marginRight-30">
							{{name}}
						</view>
						<view class="box_title ">
							门牌号{{big_sort}}-{{small_sort}}
						</view>
					</view>
					<view class="flex">
						<view class="box_cont">
							<view class="box_list" v-for="(item,index) in wordsList1" :key="index"
								:class="index==nowIndex?'box_list_hover':''">
								{{index+1}}
							</view>
						</view>
						<view class="box_cont">
							<view class="box_list" v-for="(item,index) in wordsList2" :key="index"
								:class="index+1==twoIndex?'box_list_hover':''">
								{{wordsList1.length+index+1}}.
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bg">
			{{zhuang}}
		</view>
		<view class="box flex flex-wrap relative" :style="{ height: (windowHeight-44)/2 + 'px' }">
			<image src="../../static/image/erdanyuan.png" mode="" class="positon_img"></image>
			<view class="box_lists" v-for="(i,v) in 4" :key="v">
				<view class="" v-if="small_sort==v+1&&big_sort==2">
					<view class="box_list_head flex items-center" v-if="(v)%2 ==0">
						<view class="box_title marginRight-30">
							门牌号{{big_sort}}-{{small_sort}}
						</view>
						<view class="box_pro">
							{{name}}
						</view>
					</view>
					<view class="box_list_head flex items-center flex-end" v-if="(v) % 2 ==1">
						<view class="box_pro marginRight-30">
							{{name}}
						</view>
						<view class="box_title ">
							门牌号{{big_sort}}-{{small_sort}}
						</view>
					</view>
					<view class="flex">
						<view class="box_cont">
							<view class="box_list" v-for="(item,index) in wordsList1" :key="index"
								:class="index==nowIndex?'box_list_hover':''">
								{{index+1}}
							</view>
						</view>
						<view class="box_cont">
							<view class="box_list" v-for="(item,index) in wordsList2" :key="index"
								:class="index+1==twoIndex?'box_list_hover':''">
								{{wordsList1.length+index+1}}.
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<up-popup :show="show" mode='center' bgColor='transparent'>
			<view class="popup_bg">
				<view class="popup_title">
					{{nowIndex+1}}.{{wordHead}}
				</view>
				<view class="popup_cont" v-if="!status&&rememberStatus">
					{{tran}}
				</view>
				<view class="popup_cont" v-if="status&&!rememberStatus">
					{{tran}}
				</view>
				<view class="popup_line" v-if="status&&rememberStatus">

				</view>
				<view class="flex flex-center items-center">
					<image src="../../static/alarm-icon.png" mode="" class="warn_img"></image>
					<view class="warn_title">
						千万别随意选哦
					</view>
				</view>
				<view class="next_btn" v-if="!status&&rememberStatus" @click="nextClick()">
					下一个
				</view>
				<view class="next_btn" v-if="!rememberStatus" @click="nextClick2()">
					下一个
				</view>
				<view class="flex u-flex-around marginTop-24" v-if="status&&rememberStatus">
					<view class="sure" @click="remember()">
						记住
					</view>
					<view class="noSure" @click="noRemember()">
						忘记
					</view>
				</view>
			</view>
		</up-popup>
		<up-popup :show="successShow" mode='center' bgColor='transparent'>
			<view class="popup_bg2">
				<view class="popup_title">
					温馨提示
				</view>
				<view class="popup_pro">
					太棒啦！本阶段训练完成
				</view>
				<view class="flex u-flex-between padding-30 marginTop-15">
					<view class="popup_cancel" @click="zaici">
						再次训练
					</view>
					<view class="popup_sure" @click="nextClick3">
						下阶段
					</view>
				</view>
			</view>
		</up-popup>

	</view>
</template>

<script setup>
	import {
		ref,
		inject,
		onMounted,
		reactive
	} from 'vue';
	import {
		onLoad,
		onUnload,
	} from '@dcloudio/uni-app';
	const windowHeight = ref('')
	const windowWeight = ref('')
	const page = ref(1)
	const big_sort = ref(1)
	const small_sort = ref(1)
	const getSmallFamilyWordsApi = inject('getSmallFamilyWords')
	const reciteWordsSubmitApi = inject('reciteWordsSubmit')
	const newInsertMemoryWordApi = inject('newInsertMemoryWord')
	const zhuang = ref('')
	const name = ref('')
	const wordsList1 = ref([])
	const wordsList2 = ref([])
	const show = ref(false)
	const successShow = ref(false)
	const wordHead = ref('')
	const nowIndex = ref(0)
	const tran = ref('')
	const rememberStatus = ref(true)
	const status = ref(false) //是否展示下一步弹窗
	const item = ref({})
	const region_num = ref(0)
	const startReciteApi = inject('startRecite')
	onLoad((op) => {
		console.log(op, 241)
		page.value = op.page
		big_sort.value = op.big_sort
		small_sort.value = op.small_sort
		region_num.value = op.region_num
		startReciteApi({
			page: page.value,
			big_sort: big_sort.value,
			small_sort: small_sort.value,
			type: 2,
		}).then(res => {});
		getSmallFamilyWordsApi({
			page: page.value,
			big_sort: big_sort.value,
			small_sort: small_sort.value,
			type: 1,
		}).then(res => {
			console.log(res, 83)
			zhuang.value = res.zhuang
			name.value = res.name
			wordsList1.value = res.wordsList1
			wordHead.value = res.wordsList1[0].wordHead
			wordsList2.value = res.wordsList2
			tran.value = res.wordsList1[0].tran
			show.value = true
			console.log(show.value)
		})
		// 异步获取屏幕高度
		uni.getSystemInfo({
			success: function(info) {
				windowHeight.value = info.windowHeight
				windowWeight.value = info.windowHeight
				console.log('屏幕的高度：' + windowHeight.value);
				console.log('屏幕的宽度：' + windowWeight.value);
			}
		});

	})
	const tempIndex = ref(0)
	const twoIndex = ref(0)
	// 下一个
	const nextClick = () => {
		nowIndex.value = nowIndex.value + 1
		tempIndex.value = tempIndex.value + 1

		if (nowIndex.value > 1) {
			nowIndex.value = 0
			status.value = true
			twoIndex.value = 0
			if (nowIndex.value <= wordsList1.value.length - 1) {
				wordHead.value = wordsList1.value[nowIndex.value].wordHead
				tran.value = wordsList1.value[nowIndex.value].tran
			} else {
				twoIndex.value++
				if (twoIndex.value <= wordsList2.value.length) {
					wordHead.value = wordsList2.value[twoIndex.value - 1].wordHead
					tran.value = wordsList2.value[twoIndex.value - 1].tran
				} else {
					console.log('跳转')
				}
			}
		} else {
			if (nowIndex.value <= wordsList1.value.length - 1) {
				wordHead.value = wordsList1.value[nowIndex.value].wordHead
				tran.value = wordsList1.value[nowIndex.value].tran
			} else {
				twoIndex.value++
				if (twoIndex.value <= wordsList2.value.length) {
					wordHead.value = wordsList2.value[twoIndex.value - 1].wordHead
					tran.value = wordsList2.value[twoIndex.value - 1].tran
				} else {
					console.log('跳转')
					end()
				}
			}
		}
	};
	// 记住了
	const remember = () => {
		nowIndex.value = nowIndex.value + 1
		if (nowIndex.value <= wordsList1.value.length) {
			if (nowIndex.value < wordsList1.value.length) {
				wordHead.value = wordsList1.value[nowIndex.value].wordHead
				tran.value = wordsList1.value[nowIndex.value].tran
			} else {
				// wordHead.value = wordsList1.value[nowIndex.value-1].wordHead
				// tran.value = wordsList1.value[nowIndex.value-1].tran
				twoIndex.value++
				if (twoIndex.value <= wordsList2.value.length) {
					wordHead.value = wordsList2.value[twoIndex.value - 1].wordHead
					tran.value = wordsList2.value[twoIndex.value - 1].tran
				} else {
					end()
				}
			}
			wordsList1.value[nowIndex.value - 1].rember_status = 1
			wordsList1.value[nowIndex.value - 1].rem_count++
		} else {
			twoIndex.value++
			if (twoIndex.value <= wordsList2.value.length) {
				wordHead.value = wordsList2.value[twoIndex.value - 1].wordHead
				tran.value = wordsList2.value[twoIndex.value - 1].tran
				wordsList2.value[twoIndex.value - 2].rember_status = 1
				wordsList2.value[twoIndex.value - 2].rem_count++
			} else {
				wordsList2.value[twoIndex.value - 2].rember_status = 1
				wordsList2.value[twoIndex.value - 2].rem_count++
				end()
			}
		}
		if (nowIndex.value == tempIndex.value) {
			status.value = false
		}
	}
	// 没记住
	const noRemember = () => {
		// status.value = false
		rememberStatus.value = false
		if (nowIndex.value <= wordsList1.value.length) {
			console.log('上')
			if (nowIndex.value < wordsList1.value.length) {
				wordsList1.value[nowIndex.value].unrem_count++
			} else if (nowIndex.value == wordsList1.value.length) {
				twoIndex.value++
				wordsList2.value[twoIndex.value - 2].unrem_count++
				// wordHead.value = wordsList2.value[twoIndex.value-1 ].wordHead
				// tran.value = wordsList2.value[twoIndex.value -1].tran
				console.log(twoIndex.value, 277)
				twoIndex.value = 1
			}
		} else {
			console.log('xia')
			wordsList2.value[twoIndex.value - 1].unrem_count++

		}
		console.log(wordsList1.value, wordsList2.value, 256)
	}
	const nextClick2 = () => {
		rememberStatus.value = true
		nowIndex.value = nowIndex.value + 1
		if (nowIndex.value <= wordsList1.value.length) {
			if (nowIndex.value < wordsList1.value.length) {
				wordHead.value = wordsList1.value[nowIndex.value].wordHead
				tran.value = wordsList1.value[nowIndex.value].tran
			} else {
				twoIndex.value++
				wordHead.value = wordsList2.value[twoIndex.value - 1].wordHead
				tran.value = wordsList2.value[twoIndex.value - 1].tran
				// twoIndex.value=1
			}
			wordsList1.value[nowIndex.value - 1].rember_status = 0
		} else {
			twoIndex.value++
			console.log(twoIndex.value, 301, wordsList2.value.length)
			if (twoIndex.value <= wordsList2.value.length) {

				wordHead.value = wordsList2.value[twoIndex.value - 1].wordHead
				tran.value = wordsList2.value[twoIndex.value - 1].tran
				wordsList2.value[twoIndex.value - 1].rember_status = 0
				console.log(wordsList2.value, 237, '上')
			} else {
				wordsList2.value[twoIndex.value - 2].rember_status = 0
				console.log(wordsList2.value, 237, '下')
				console.log('跳转')
				end()
			}
		}
		console.log(nowIndex.value, twoIndex.value, 252)
		if (nowIndex.value == tempIndex.value) {
			status.value = false
		}
	}
	// 提交记忆单词
	const end = () => {
		// let remWords = []
		// let unremWords = []
		// wordsList1.value.forEach((item, index) => {
		// 	if (item.rember_status == 1) {
		// 		remWords.push(item.wordId)
		// 	} else {
		// 		unremWords.push(item.wordId)
		// 	}
		// })
		// wordsList2.value.forEach((item, index) => {
		// 	if (item.rember_status == 1) {
		// 		remWords.push(item.wordId)
		// 	} else {
		// 		unremWords.push(item.wordId)
		// 	}
		// })
		let wordList = []
		wordsList1.value.forEach((item, index) => {
			wordList.push(item)
		})
		wordsList2.value.forEach((item, index) => {
			wordList.push(item)
		})

		console.log(wordList, 288)
		reciteWordsSubmitApi({
			// remWords: remWords.join(','),
			// unremWords: unremWords.join(','),
			wordList: wordList,
			page: page.value,
			big_sort: big_sort.value,
			small_sort: small_sort.value
		}).then(res => {
			console.log(res, 178)
			successShow.value = true
			show.value=false
			// uni.redirectTo({
			// 	url: '/pagesA/reciteWords/wordDesc?big_sort=' + big_sort.value +
			// 		'&page=' + page.value + '&small_sort=' + small_sort.value + '&step=4'
			// })

		})
	}
	const zaici = () => {
		uni.redirectTo({
			url: '/pagesA/reciteWords/fourStage?page=' + page.value + "&small_sort=" + small_sort.value +
				'&big_sort=' + big_sort.value
		})
	}
	const nextClick3 = () => {
		uni.redirectTo({
			url: '/pagesA/reciteWords/wordDesc?big_sort=' + big_sort.value +
				'&page=' + page.value + '&small_sort=' + small_sort.value + '&step=4'
		})
	}
</script>

<style scoped lang="scss">
	.box {
		width: 710rpx;
		border: 12rpx solid #51D580;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		margin: 10rpx auto 0;

		.box_lists {
			width: calc(50% - 6rpx);
			height: calc(50% - 6rpx);
			border-right: 6rpx solid #51D580;
			border-bottom: 6rpx solid #51D580;

			.box_list_head {
				padding: 16rpx;

				.box_title {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #666666;
				}

				.box_pro {
					font-weight: bold;
					font-size: 24rpx;
					color: #666666;

				}
			}

			.box_list {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 26rpx;
				color: #333333;

			}

			.box_list_hover {
				background: rgba(0, 0, 0, 0.6);
			}

			.box_cont {
				width: 50%;
			}

			.hover {
				color: #51D580;
			}

			.box_list_cont {
				width: 50%;
				position: relative;
			}

			.border_right {
				border-right: 1rpx dashed #CCCCCC;
			}

			.box_list {
				width: 50%;
				padding: 10rpx;
			}
		}

		.positon_img {
			position: absolute;
			width: 134rpx;
			height: 60rpx;
			top: 50%;
			left: 50%;
			margin-top: -30rpx;
			margin-left: -67rpx;
		}

	}

	.bg {
		width: 188rpx;
		height: 84rpx;
		background: #FFC300;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		border: 6rpx solid #51D580;
		text-align: center;
		line-height: 84rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 800;
		font-size: 30rpx;
		color: #FFFFFF;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-left: -104rpx;
		margin-top: -52rpx;
		z-index: 999;
	}

	.popup_bg {
		width: 686rpx;
		height: 830rpx;
		background: rgba(255, 255, 255, 0.85);
		border-radius: 40rpx 40rpx 40rpx 40rpx;

		.popup_title {
			padding-top: 100rpx;
			text-align: center;
			font-family: PingFang SC, PingFang SC;
			font-weight: 800;
			font-size: 60rpx;
			color: #333333;
		}

		.popup_line {
			width: 606rpx;
			height: 40rpx;
			margin: 260rpx auto 164rpx;
			background: linear-gradient(to right, #BFEACE, #51D580);
		}

		.sure {
			width: 308rpx;
			height: 104rpx;
			background: #51D580;
			border-radius: 92rpx 92rpx 92rpx 92rpx;
			text-align: center;
			line-height: 104rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #FFFFFF;
		}

		.noSure {
			width: 308rpx;
			height: 104rpx;
			border-radius: 92rpx 92rpx 92rpx 92rpx;
			border: 2rpx solid #51D580;
			text-align: center;
			line-height: 104rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #51D580;
		}

		.warn_img {
			width: 28rpx;
			height: 28rpx;
			margin-right: 4rpx;
		}

		.warn_title {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #999999;
		}

		.popup_cont {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #333333;
			text-align: center;
			margin: 260rpx auto 164rpx;
		}

		.next_btn {
			width: 638rpx;
			height: 104rpx;
			background: #51D580;
			border-radius: 92rpx 92rpx 92rpx 92rpx;
			text-align: center;
			line-height: 104rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #FFFFFF;
			margin: 20rpx auto 0;
		}
	}
	.popup_bg2 {
		width: 610rpx;
		height: 500rpx;
		background: url('https://bbsf.oss-cn-shanghai.aliyuncs.com/english/icons/remind.png') no-repeat;
		background-size: 100% 100%;
	
		.popup_title {
			font-family: PingFang SC, PingFang SC;
			font-weight: 800;
			font-size: 52rpx;
			color: #FFFFFF;
			text-align: center;
			padding-top: 20rpx;
		}
	
		.popup_pro {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 36rpx;
			color: #333333;
			line-height: 42rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;
			width: 504rpx;
			height: 100rpx;
			margin: 120rpx auto 0;
		}
	
		.popup_cancel {
			width: 252rpx;
			height: 92rpx;
			background: #CCCCCC;
			border-radius: 74rpx 74rpx 74rpx 74rpx;
			text-align: center;
			line-height: 92rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 800;
			font-size: 32rpx;
			color: #FFFFFF;
		}
	
		.popup_sure {
			width: 252rpx;
			height: 92rpx;
			background: #51D580;
			border-radius: 74rpx 74rpx 74rpx 74rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 800;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 92rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;
		}
	
		.popup_see {
			width: 526rpx;
			height: 92rpx;
			background: #51D580;
			border-radius: 74rpx 74rpx 74rpx 74rpx;
			text-align: center;
			line-height: 92rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 800;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 92rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;
		}
	
	}
</style>